<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/2-1'}">老师管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/2-1'}">老师列表</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/2-1'}">老师添加</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin-top: 50px">
      <el-col :span="20" :offset="2">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" :inline="true" status-icon>
          <div>
            <el-form-item label="上传头像" prop="headimg">
              <el-upload :action="upload" :on-success="handleupload" name="files"
                         :show-file-list="false">
                <el-button type="primary">上传头像</el-button>
              </el-upload>
              <img :src="ruleForm.headimg" class="headimg" v-show="ruleForm.headimg">
            </el-form-item>
          </div>
          <div>
            <el-form-item label="老师姓名" prop="name">
              <el-input v-model="ruleForm.name">
              </el-input>
            </el-form-item>
            <el-form-item label="老师性别" class="sex" prop="sex">
              <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="微信号码" prop="wechat">
            <el-input v-model="ruleForm.wechat">
            </el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <div>
            <el-form-item>
              <el-button type="primary" @click="wentback">返回</el-button>
              <el-button type="warning" @click="submit('ruleForm')">添加</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    addTeacher
  } from "@/api/teacher/teacher";

  export default {
    name: "TeacherAdd",
    props:{
      upload:String
    },
    data() {
      return {
        fileList: [],
        headimg: '',
        options: [{
          value: '1',
          label: '男'
        },
          {
            value: '2',
            label: '女'
          },
        ],
        ruleForm: {
          name: '',
          sex: '',
          wechat: '',
          phone: '',
          headimg:''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入您的姓名',
            trigger: 'blur'
          },
            {
              min: 1,
              max: 5,
              message: '名字这么长，你是日本人啊？',
              trigger: 'blur'
            }
          ],
          sex: [{
            required: true,
            message: '请选择老师的性别',
            trigger: 'change'
          }],
          wechat: [{
            required: true,
            message: '请输微信账号',
            trigger: 'blur'
          },
            {
              min: 1,
              max: 20,
              message: '您的微信号也太长了',
              trigger: 'blur'
            }
          ],
          verify: [
            {
              required: true,
              message: '请输验证码',
              trigger: 'blur'
            }
          ],
          headimg: [
            {
              required: true,
              message: '请上传老师头像',
              trigger: 'blur'
            }
          ],
          phone: [{
            required: true,
            message: '请输手机账号',
            trigger: 'blur'
          }, {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }],
          img: [{
            required: true,
            message: '请添加图片',
            trigger: 'change'
          }]
        }
      }
    },
    methods: {
      handleupload(response) {
        console.log(response);
        this.ruleForm.headimg = response.URLList[0].url;
      },
      wentback() {
        this.$router.push({
          name: 'TeachList'
        })
      },
      submit(ruleForm) {
        let params = {};
        params.name = this.ruleForm.name;
        params.sex = this.ruleForm.sex;
        params.wechatNumber = this.ruleForm.wechat;
        params.phone = this.ruleForm.phone;
        params.headImg = this.ruleForm.headimg;
        params.types = 1;
        let id=JSON.parse(localStorage.userinfo).id;
        params.createBy=id;
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.$confirm('确定添加老师吗?', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
            }).then(() => {
              let _this = this;
              addTeacher(params).then(function (res) {
                if (res.data.id.length !== 0) {
                  _this.$message({
                    type: 'success',
                    message: '已添加老师!'
                  });
                  _this.$router.push({name: 'TeachList'})
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消添加'
              });
            });
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .verify {
    .abs;
    margin-top: 60px;
    margin-left: -210px;
    /deep/ .el-input__inner {
      width: 120px;
      margin-bottom: 5px;
    }
  }

  .sex {
    /deep/ .el-input__inner {
      width: 202px;
    }
  }

  .headimg {
    width: 150px;
    height: 150px;
  }

  .wrapper {
    .w100;
  }
</style>
